<template>
	<h1>各类品牌电脑图片</h1>
	<div v-for="(img, index) in images" :key="index" class="image-container">
		<img :src="img" alt="Image" @click="showShare = true" />
		<van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
		<p v-if="index < images.length - 1" class="image-caption">
			{{ getBrandName(index) }}
		</p>

	</div>
</template>

<script>
	export default {
		setup() {
			const showShare = ref(false);
			const options = [{
					name: '微信',
					icon: 'wechat'
				},
				{
					name: '微博',
					icon: 'weibo'
				},
				{
					name: '复制链接',
					icon: 'link'
				},
				{
					name: '分享海报',
					icon: 'poster'
				},
				{
					name: '二维码',
					icon: 'qrcode'
				},
			];

			const onSelect = (option) => {
				showToast(option.name);
				showShare.value = false;
			};

			return {
				options,
				onSelect,
				showShare,
			};
		},
		data() {
			return {
				images: [
					'https://img1.donvv.com/1000030/GoodsPhoto/2020/12/2/004e1e8570c5012539e704273636ca95.jpg',
					'https://image.suning.cn/uimg/MZMS/show/165829937008266360.jpg',
					'https://imgservice.suning.cn/uimg1/b2c/image/roDf8d5HCJblpgEdbRRvwQ.png_800w_800h_4e'
				],
				brands: ['小米', '联想']
			};
		},
		methods: {
			getBrandName(index) {
				return this.brands[index % this.brands.length];
			}
		}
	};
	import {
		ref
	} from 'vue';
	import {
		showToast
	} from 'vant';
</script>

<style>
	.image-container {
		margin-bottom: 20px;
	}

	.image-container img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	.image-caption {
		margin-top: 10px;
		color: #555;
		font-style: italic;
		text-align: center;
	}
</style>